<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link rel="stylesheet" href="../static/plugins/iview/styles/iview.css">
    <link rel="stylesheet" href="../static/css/base.css">
    <link rel="stylesheet" href="../static/css/widget.css">
    <link rel="stylesheet" href="../static/css/innerPage.css">

    <script src="../static/js/lodash.js"></script>

    <style>
        html,
        body {
            color: #495060;
        }
        
        #list-top-wrap {
            background-color: #f8f8f9;
            padding: 0;
            border: 1px #dddee1 solid;
        }
        
        #list-top-wrap .each {
            padding: 0px 30px;
            text-align: center;
            border-right: 1px #dddee1 solid;
            display: inline-block;
            cursor: pointer;
            height: 45px;
            line-height: 45px;
            color: #495060;
        }
        
        #list-top-wrap .each.active {
            color: #2c89eb;
        }
        
        #list-top-wrap .each .fa {
            color: #999;
        }
        
        #list-top-wrap .right_tips {
            color: #61c6d6;
            font-size: 12px;
            line-height: 45px;
            height: 45px;
            padding-right: 20px;
        }
        
        .each_detail {
            margin-top: 22px;
            margin-bottom: 20px;
        }
        
        .each_detail .header>div {
            display: inline-block;
            padding: 0px 10px;
            color: #80848f;
            font-size: 12px;
        }
        
        .each_detail .header .title {
            font-size: 16px;
            color: #1c2438;
            cursor: pointer;
            font-weight: bold;
        }
        
        .each_detail .header .title .fa {
            font-size: 18px;
            color: #E2E1E5;
        }
        
        .each_detail .subheader {
            height: 30px;
            line-height: 30px;
            padding: 10px 0px;
        }
        
        .each_detail .subheader>div {
            display: inline-block;
            padding: 0px 18px;
            font-size: 14px;
            border-right: 1px #E2E1E5 solid;
            height: 12px;
            line-height: 12px;
        }
        
        .each_detail .subheader>div:last-child {
            border-right: none;
        }
        
        .each_detail .subheader>div>span {
            color: #2d8cf0;
        }
        
        .each_detail .subheader>div:first-child {
            padding-left: 34px;
        }
        
        .each_detail .body {
            margin-top: 15px;
            line-height: 24px;
            padding-left: 34px;
        }
        
        .footer {
            margin-top: 10px;
            margin-left: 30px;
            padding-bottom: 22px;
        }
        
        .border_bottom {
            border-bottom: 1px #E2E1E5 solid;
        }
        
        .each_detail .footer .ivu-badge-count {
            background-color: white;
            color: #85cddb;
            border: 1px #85cddb solid;
            height: 24px;
            line-height: 22px;
            padding: 0px 10px;
            border-radius: 14px;
            cursor: pointer;
            font-size: 12px;
        }
        
        #list-pager-wrap {
            text-align: center;
        }
        
        .w1000 {
            width: 1000px!important;
        }
        
        .w1200 {
            width: 1200px!important;
        }
        
        #search-wrap label {
            display: inline-block;
            width: 80px;
            text-align: right;
            color: #495060;
            font-size: 12px;
        }
        
        #search-wrap .ivu-input-wrapper {
            width: 300px;
        }
        
        #list-top-wrap .ivu-tag {
            height: 36px;
            line-height: 36px;
        }
    </style>

</head>

<body class="">


    <div class="sc-container w1200" id="app">

        <div id="search-wrap" class="clearfix">

            <!-- 首行 -->
            <div class="search_first_line clearfix">

                <label for="category">发布日期：</label>
                <date-picker type="datetimerange" format="yyyy-MM-dd" placeholder="请选择发布日期" style="width: 300px"></date-picker>

                <label for="category">供应商：</label>
                <i-select v-model="searchForm.supplier" multiple style="width:300px">
                    <i-option v-for="item in searchForm.supplierList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                </i-select>




                <div class="searchKey_container" style="float:right">
                    <i-input v-model="searchForm.searchKey" placeholder="服务名称/供应商关键字"></i-input>
                    <i-button type="primary">查询</i-button>
                </div>



            </div>

            <div class="clearfix">

                <label for="status">运行状态：</label>
                <i-select v-model="searchForm.status" multiple style="width:300px">
                    <i-option v-for="item in searchForm.statusList" :value="item.value" :key="item.value">{{ item.label }}</i-option>
                </i-select>

                <label for="category">业务分类：</label>
                <Cascader id="category" style="display:inline-block;width:300px;" :data="searchForm.categoryArr" v-model="searchForm.subCategory" placeholder="请选择业务分类"></Cascader>
            </div>
        </div>

        <div id="tools-wrap" class="clearfix">
            <button type="button" class="ivu-btn ivu-btn-primary" v-on:click.stop="toAdd">  <span>新增</span></button>
            <button type="button" class="ivu-btn"><span>删除</span></button>
            <button type="button" class="ivu-btn"><span>修改</span></button>
        </div>

        <div id="list-top-wrap" class="clearfix mt_10" style="padding:10px;">
            <Tag color="blue">全部100</Tag>
            <Tag color="">环境监察20</Tag>
            <Tag color="">环境监测20</Tag>
            <Tag color="">基本服务20</Tag>
        </div>

        <div id="list-wrap" class="clearfix mt_10">

            <!-- <i-table :columns="columns1" :data="data1"></i-table> -->

            <i-table :columns="columns1" :data="data1"></i-table>

        </div>


        <div id="list-pager-wrap" class="clearfix">
            <Page :total="pager.total" v-on:on-change="pageOnChange" :page-size="pager.pageSize" :current="pager.current" show-elevator show-total></Page>
        </div>

        <div id="page-bottom-wrap" class="clearfix">
            <img class="" style="height: 80px; width: 100% " src="../static/images/\innerPage/list-bottom.jpg" />
        </div>



    </div>


    <template id="expand_row_tpl" class="vue-tpl">
            <div>
                    <i-row class="expand-row" v-for="log in row.logs">
                        <i-col span="4">
                           &nbsp;
                        </i-col>
                        <i-col span="16">
                            <span class="expand-key fb">{{ log.optTime }} </span>
                            <span class="expand-value">{{ log.optContent }}</span>
                        </i-col>
                        <i-col span="4">
                                &nbsp;
                        </i-col>
                    </i-row>
                   
                </div>

    </template>


    <script src="../static/js/jquery.js"></script>


    <script src="../static/plugins/iview/vue.min.js"></script>

    <!-- 引入样式 -->
    <!-- <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css"> -->
    <script src="../static/plugins/iview/locale/zh-CN.js"></script>

    <script src="../static/plugins/iview/iview.min.js"></script>

    <script src="../static/js/suit.js"></script>

    <script src="../static/js/ba-resize.js"></script>

    <script>
        Vue.mixin({
            methods: {
                //当前打开还是新窗口打开切换
                ChangeHasTop: function() {

                    var a = window.parent.app.changeHasTop(true);

                },
                //当前打开还是新窗口打开切换
                openUrlNewWidow: function(url) {
                    url = url || window.location.href;
                    window.open(url); //在另外新建窗口中打开窗口
                }
            }
        })

        var expandRow =

            Vue.component('expand-row', {
                template: '#expand_row_tpl',
                props: ['row'],
                data: {

                },
                computed: {}
            });


        var app = new Vue({
            el: '#app',

            data: {
                pager: {
                    current: 1,
                    pageSize: 5,
                    total: 30
                },
                columns1: [{
                    type: 'expand',
                    width: 50,
                    render: (h, params) => {
                        return h(expandRow, {
                            props: {
                                row: params.row
                            }
                        })
                    }
                }, {
                    title: '组件名称',
                    key: 'name'
                }, {
                    title: '最新版本',
                    key: 'lastVersion'
                }, {
                    title: '组件描述',
                    key: 'desc',
                    width: 300
                }, {
                    title: '状态',
                    key: 'status'
                }, {
                    title: '业务分类',
                    key: 'category'
                }, {
                    title: '供应商',
                    key: 'supplier'
                }, {
                    title: '操作',
                    key: 'opt',
                    // fixed: 'right',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small'
                                },
                                style: {
                                    color: '#2d8cf0'
                                },
                                on: {
                                    click: function() {
                                        var a = window.parent.app.changePageUrl({
                                            url: '../innerPage/componentDetail.html?id=1001',
                                            menuName: params.row.name,
                                            menuPath: ["组件详情"]
                                        });
                                    }
                                }
                            }, '详情'),
                            h('Button', {
                                props: {
                                    type: 'text',
                                    size: 'small'
                                },
                                style: {
                                    color: '#2d8cf0'
                                },
                                on: {
                                    click: function() {
                                        var a = window.parent.app.changePageUrl({
                                            url: '../comjs-my/comViewer.htm?id=1001',
                                            menuName: params.row.name + "在线预览",
                                            menuPath: ["在线预览"]
                                        });
                                    }
                                }
                            }, '在线预览')
                        ]);
                    }
                }],
                data1: [{
                    name: '建设项目信息',
                    lastVersion: 'v910-01-001',
                    lastUpdateTime: '2010-12-16',
                    desc: '用于展现建项目基本信息',
                    date: '2016-10-03',
                    status: '运行中',
                    category: "环境监察/移动执法",
                    supplier: '梦兰神采',
                    opt: '',
                    logs: [{
                        optTime: '2017-10-01',
                        optContent: '更规范和完整的模板库; 补充组件用法,避免误用'
                    }, {
                        optTime: '2017-09-01',
                        optContent: ' 组件发生重大改变，替换原有组件V310-02-002'
                    }]
                }, {
                    name: '统一污染源编码',
                    lastVersion: 'v910-01-001',
                    lastUpdateTime: '2010-12-16',
                    desc: '用于污染源编展示',
                    date: '2016-10-03',
                    status: '运行中',
                    category: "环境监察/移动执法",
                    supplier: '梦兰神采',
                    opt: '',
                    logs: [{
                        optTime: '2017-10-01',
                        optContent: '更规范和完整的模板库; 补充组件用法,避免误用'
                    }, {
                        optTime: '2017-09-01',
                        optContent: ' 组件发生重大改变，替换原有组件V310-02-002'
                    }]
                }, {
                    name: '企业档案查询',
                    lastVersion: 'v910-01-001',
                    lastUpdateTime: '2010-12-16',
                    desc: '用于污染源编展示',
                    date: '2016-10-03',
                    status: '运行中',
                    category: "环境监察/移动执法",
                    supplier: '梦兰神采',
                    opt: '',
                    logs: [{
                        optTime: '2017-10-01',
                        optContent: '更规范和完整的模板库; 补充组件用法,避免误用'
                    }, {
                        optTime: '2017-9-01',
                        optContent: ' 组件发生重大改变，替换原有组件V310-02-002'
                    }]
                }, {
                    name: '短息组件',
                    lastVersion: 'v910-01-001',
                    lastUpdateTime: '2010-12-16',
                    desc: '用于污染源编展示',
                    date: '2016-10-03',
                    status: '运行中',
                    category: "环境监察/移动执法",
                    supplier: '梦兰神采',
                    opt: '',
                    logs: [{
                        optTime: '2017-10-01',
                        optContent: '更规范和完整的模板库; 补充组件用法,避免误用'
                    }, {
                        optTime: '2017-9-01',
                        optContent: ' 组件发生重大改变，替换原有组件V310-02-002'
                    }]
                }, {
                    name: '邮件组件',
                    lastVersion: 'v910-01-001',
                    lastUpdateTime: '2010-12-16',
                    desc: '用于污染源编展示',
                    date: '2016-10-03',
                    status: '运行中',
                    category: "环境监察/移动执法",
                    supplier: '梦兰神采',
                    opt: '',
                    logs: [{
                        optTime: '2017-10-01',
                        optContent: '更规范和完整的模板库; 补充组件用法,避免误用'
                    }, {
                        optTime: '2017-9-01',
                        optContent: ' 组件发生重大改变，替换原有组件V310-02-002'
                    }]
                }, {
                    name: '弹框组件',
                    lastVersion: 'v910-01-001',
                    lastUpdateTime: '2010-12-16',
                    desc: '用于污染源编展示',
                    date: '2016-10-03',
                    status: '运行中',
                    category: "环境监察/移动执法",
                    supplier: '梦兰神采',
                    opt: '',
                    logs: [{
                        optTime: '2017-10-01',
                        optContent: '更规范和完整的模板库; 补充组件用法,避免误用'
                    }, {
                        optTime: '2017-09-01',
                        optContent: ' 组件发生重大改变，替换原有组件V310-02-002'
                    }]
                }, {
                    name: '滑动组件',
                    lastVersion: 'v910-01-001',
                    lastUpdateTime: '2010-12-16',
                    desc: '用于污染源编展示',
                    date: '2016-10-03',
                    status: '运行中',
                    category: "环境监察/移动执法",
                    supplier: '梦兰神采',
                    opt: '',
                    logs: [{
                        optTime: '2017-10-01',
                        optContent: '更规范和完整的模板库; 补充组件用法,避免误用'
                    }, {
                        optTime: '2017-9-01',
                        optContent: ' 组件发生重大改变，替换原有组件V310-02-002'
                    }]
                }, {
                    name: '滚动监听组件',
                    lastVersion: 'v910-01-001',
                    lastUpdateTime: '2010-12-16',
                    desc: '用于污染源编展示',
                    date: '2016-10-03',
                    status: '运行中',
                    category: "环境监察/移动执法",
                    supplier: '梦兰神采',
                    opt: '',
                    logs: [{
                        optTime: '2017-10-01',
                        optContent: '更规范和完整的模板库; 补充组件用法,避免误用'
                    }, {
                        optTime: '2017-9-01',
                        optContent: ' 组件发生重大改变，替换原有组件V310-02-002'
                    }]
                }, {
                    name: '上传组件',
                    lastVersion: 'v910-01-001',
                    lastUpdateTime: '2010-12-16',
                    desc: '用于污染源编展示',
                    date: '2016-10-03',
                    status: '运行中',
                    category: "环境监察/移动执法",
                    supplier: '梦兰神采',
                    opt: '',
                    logs: [{
                        optTime: '2017-10-01',
                        optContent: '更规范和完整的模板库; 补充组件用法,避免误用'
                    }, {
                        optTime: '2017-9-01',
                        optContent: ' 组件发生重大改变，替换原有组件V310-02-002'
                    }]
                }],
                searchForm: {
                    subCategory: [],
                    categoryArr: [{
                        value: '1',
                        label: '环境监控',
                        children: [{
                            value: '11',
                            label: '移动执法'
                        }, {
                            value: '12',
                            label: '厦门环保'
                        }]
                    }, {
                        value: '2',
                        label: '污水治理',
                        children: [{
                            value: '21',
                            label: '污染指标'
                        }, {
                            value: '22',
                            label: '污染地区'

                        }],
                    }],
                    supplierList: [{
                        value: '江苏梦兰神采科技股份有限公司',
                        label: '江苏梦兰神采科技股份有限公司'
                    }, {
                        value: '江苏梦兰科技股份有限公司',
                        label: '江苏梦兰科技股份有限公司'
                    }, {
                        value: '江苏神采科技股份有限公司',
                        label: '江苏神彩科技股份有限公司'
                    }],
                    supplier: [],
                    status: [],
                    statusList: [{
                        value: '运行中',
                        label: '运行中'
                    }, {
                        value: '暂停',
                        label: '暂停'
                    }, {
                        value: '下线',
                        label: '下线'
                    }],
                    searchBodyShow: false,
                    searchKey: '',
                    publicTimeSort: false
                },

            },
            mounted: function() {

            },
            computed: {
                curPageComponentList: function() {
                    var subCategory = this.searchForm.subCategory.pop() || "";
                    var supplier = this.searchForm.supplier;
                    var searchKey = this.searchForm.searchKey;
                    var publicTimeSortStr = this.searchForm.publicTimeSort ? 'asc' : 'desc';

                    var me = this;
                    var arr = _.filter(this.componentList, function(item) {
                        return (subCategory == "" || item.subCategory == subCategory) &&
                            (supplier.length == 0 || supplier.indexOf(item.callType) > -1) &&
                            (searchKey.length == 0 || item.supplierName.indexOf(searchKey) > -1 || item.name.indexOf(searchKey) > -1);

                    });
                    me.pager.total = arr.length;

                    arr = _.sortBy(arr, ['publicTime'], [publicTimeSortStr]);
                    return arr.slice(me.pager.pageSize * (me.pager.current - 1) + 1, me.pager.pageSize);
                }
            },
            methods: {
                toAdd: function() {
                    var url = '../innerPage/add.html';
                    if (window.parent.app.changePageUrl) {
                        window.parent.app.changePageUrl({
                            url: url,
                            menuName: "组件新增",
                            menuPath: ["组件管理"]
                        });
                    } else {
                        windows.open(url);
                    }
                },
                changePageUrl: function(cl) {
                    var a = window.parent.app.changePageUrl({
                        url: '../innerPage/detail.html?id=1001',
                        menuName: cl.name,
                        menuPath: ["组件详情"]
                    });

                },
                pageOnChange: function(val) {
                    console.log(val);
                    this.pager.current = val;
                },
                togglePublicTimeSort: function() {
                    this.searchForm.publicTimeSort = !this.searchForm.publicTimeSort;
                },

                searchBodyShowToggle: function(toVal) {
                    if (toVal == undefined) {
                        this.searchBodyShow = !this.searchBodyShow;
                    } else {
                        this.searchBodyShow = toVal;
                    }

                },
                formLeftIconLine: function() {
                    $(".form-wrap-width-leftIcon .line").animate({
                        opacity: 0.5
                    });

                    setInterval(function() {
                        $(".form-wrap-width-leftIcon .line").animate({
                            opacity: 1
                        });
                    }, 200);
                    $(".form-wrap-width-leftIcon .form-right").resize(function() {
                        var rightWrap = $(".form-wrap-width-leftIcon .form-right").height();
                        var rightWrapLastChild = $(".form-wrap-width-leftIcon .form-right .widget:last-child").height();
                        $(".form-wrap-width-leftIcon .line,.form-wrap-width-leftIcon.form-right").css({
                            height: rightWrap - rightWrapLastChild - 36 + "px"
                        });
                    });
                    $(".form-wrap-width-leftIcon .form-right").trigger('resize');
                }
            }

        });
    </script>

</body>

</html>